import { Navigate ,useRoutes} from "react-router-dom";
import Login from "../components/Login";
import Main from "../components/Main";
import NotFonud from '../components/404'


import Home from "../components/Main/Home";
import About from "../components/Main/About";
import Music from '../components/Main/Home/Music'
import News from '../components/Main/Home/News'

const routes = [
    {
        path: '/login',
        element: <Login />,
    },
    {
        path: '/main',
        element: <Main />,
        children:[
            {
                path: "/main/home",
                element: <Home />,
                children:[
                    {
                        path: "/main/home/music",
                        element: <Music />
                      },
                      {
                        path: "/main/home/news",
                        element: <News />
                      },
                ]
              },
              {
                path: "/main/about",
                element: <About />
              }, 
        ]
    },
    {
        path: '/',
        element: <Navigate  to="/login"/>,
    },
    {
        path: '*',
        element: <NotFonud />,
    },
]
export default routes;

export const GetRoutes = () =>{
    return useRoutes(routes)
}
export const useMyRoutes = () => {
    //在自定义hooks中是可以使用hook
    return useRoutes(routes)
  }